<!--系统主界面-->
<!--展示所有产品信息-->
<!--可以删除-编辑认证任务-->
<template>
  <div>
    <div class="proInfoContainer">

      <div class="leftContainer" style="display: flex; flex-direction: column;">
        <div class="box3">
          <h2>产品信息</h2>
        </div>

        <!--搜索产品-->
        <div class="box4">
          <el-form :inline="true" :model="search_pro" class="demo-form-inline">
            <el-form-item label="负责人" style=" margin-top: 5px">
              <el-select v-model="search_pro.charger" placeholder="负责人/测试项目经理">
                <el-option label="测试项目经理一" value="测试项目经理一"></el-option>
                <el-option label="测试项目经理二" value="测试项目经理二"></el-option>
                <el-option label="测试项目经理三" value="测试项目经理三"></el-option>
              </el-select>
              <!--              <el-input v-model="search_pro.charger" placeholder="负责人/测试项目经理"></el-input>-->
            </el-form-item>
            <el-form-item label="产品" style="margin-left: 20px;  margin-top: 5px">
              <el-select v-model="search_pro.proName" placeholder="产品名称">
                <el-option label="交换机" value="交换机"></el-option>
                <el-option label="华为路由器" value="华为路由器"></el-option>
                <el-option label="处理器" value="处理器"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 20px;  margin-top: 5px">
              <el-button type="primary" @click="selectByChargerStatus">筛选</el-button>
              <el-button type="info" plain @click="drawBack">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!--产品信息展示-->
        <div class="box5">
          <el-table class="table_pro" :data="proInfo" border stripe height="450"
                    :header-cell-style="{ backgroundColor:'aliceblue ', color:'#666' }">
            <el-table-column
                type="selection"
                width="55"
                align="center">
            </el-table-column>
            <el-table-column prop="id" label="产品ID"></el-table-column>
            <el-table-column prop="proName" label="产品名称"></el-table-column>
            <el-table-column prop="authName" label="认证名称"></el-table-column>
            <el-table-column prop="startDate" label="开始日期"></el-table-column>
            <el-table-column prop="deadline" label="截止日期"></el-table-column>
            <el-table-column prop="proStatus" label="产品状态"></el-table-column>
            <el-table-column prop="charger" label="负责人"></el-table-column>
            <el-table-column prop="notes" label="备注"></el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="delProInfo(scope.row)">撤销</el-button>
                <el-button type="text" size="small" @click="editProInfo(scope.row)">编辑</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>

      </div>

      <div class="rightContainer">
        <div class="progressTitle">
          <h2>进度条</h2>
        </div>

        <div class="progressInfo">
          <el-steps direction="vertical" :active="1" style="text-align: center">
            <el-step title="CCC认证"></el-step>
            <el-step title="RoHS认证"></el-step>
            <el-step title="FCC认证"></el-step>
            <el-step title="CE认证"></el-step>
            <el-step title="......"></el-step>
          </el-steps>
        </div>

      </div>


      <!--编辑认证任务-->
      <!--弹出对话框-->
      <el-dialog title="编辑认证任务" :visible.sync="proInfoFormVisible" style="width: 100%">
        <el-form :model="productOne" :rules="rulesProInfo" ref="ruleProInfoForm" label-width="100px"
                 class="demo-ruleForm">

          <el-form-item label="产品名称" prop="proName" :disabled="true">
            <el-input v-model="productOne.proName" style="width: 500px" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="认证名称" prop="authName">
            <el-select v-model="productOne.authName" placeholder="请选择认证名称">
              <el-option label="CCC认证" value="CCC认证"></el-option>
              <el-option label="信息安全认证" value="信息安全认证"></el-option>
              <el-option label="CE认证" value="CE认证"></el-option>
              <el-option label="RoHS认证" value="RoHS认证"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="产品状态" prop="proStatus">
            <el-radio v-model="productOne.proStatus" label="未发起审批"></el-radio>
            <el-radio v-model="productOne.proStatus" label="待审批"></el-radio>
            <el-radio v-model="productOne.proStatus" label="已完成"></el-radio>
          </el-form-item>

          <el-form-item label="截止时间" required>
            <el-col :span="3">
              <el-form-item prop="deadline">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择截止日期"
                                v-model="productOne.deadline"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="3">--</el-col>
            <el-col :span="7">
              <!--这个其实用不上-->
              <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="productOne.deadMinute"></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="负责人" prop="charger" style="margin-left: -15px" :disabled="true">
            <el-input v-model="productOne.charger" style="margin-left: 15px; width: 500px" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="备注" prop="notes" style="margin-left: -30px">
            <el-input type="textarea" v-model="productOne.notes" style="margin-left: 30px; width: 500px "></el-input>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer-1">
          <el-button @click="proInfoFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveProInfo">确 定</el-button>
        </div>

      </el-dialog>

      <!--删除选中数据-->
      <!--弹出对话框-->
      <el-dialog title="确认删除认证任务" :visible.sync="deleteFormVisible" style="width: 100%">

        <div slot="footer" class="dialog-footer-2">
          <el-button @click="deleteFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteConfirm">确 定</el-button>
        </div>

      </el-dialog>

    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Home",
  data() {
    return {
      proInfo: [], //产品认证信息

      search_pro: { //搜索条件——信息
        charger: '',
        proName: '',
      },

      proInfoFormVisible: false, //编辑产品信息对话框的可见性，默认不可见

      deleteFormVisible : false, //删除/撤销产品信息对话框的可见性，默认不可见

      productOne: { //单个产品信息
      },

      rulesProInfo: {
        proName: [
          {required: true, message: '请输入产品名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        authName: [
          {required: true, message: '请选择认证名称', trigger: 'change'}
        ],

        proStatus: [
          {required: true, message: '请选择产品状态', trigger: 'change'}
        ],

        dateDdl: [
          {type: 'date', required: true, message: '请选择截止日期', trigger: 'change'}
        ],

        charger: [
          {required: true, message: '请输入项目负责人-测试项目经理', trigger: 'change'}
        ],
        notes: [
          {required: true, message: '请填写备注信息', trigger: 'blur'}
        ]
      },
    }
  },

  methods: {
    //筛选
    selectByChargerStatus() {

      let search_pro = this.search_pro

      request.get('/product/selectByChargerProName', {
        params: { //传入参数
          charger: search_pro.charger,
          proName: search_pro.proName,
        }
      }).then(res => {
        this.proInfo = res.data
      }).catch(error => {
        console.error('Error:', error);
      });

    },

    //取消筛选
    drawBack() {
      //清除筛选条件
      this.search_pro.charger = '';
      this.search_pro.proName = '';

      request.get('/product/selectAll').then(res => {
        this.proInfo = res.data
      })
    },

    //打开编辑
    editProInfo(row) {
      this.productOne = JSON.parse(JSON.stringify(row)) //拿到当前行数据
      this.proInfoFormVisible = true //弹出对话框
    },

    //保存编辑
    saveProInfo() {
      //验证输入合法性
      this.$refs.ruleProInfoForm.validate((valid) => {
        if (valid) {
          //验证通过
          //发送到后端 '/product/updateByProductInfo', {params: this.productOne}
          this.$request({
                url: '/product/updateByProductInfo',
                method: 'POST',
                data: this.productOne,
              }
          ).then(res => {
            //发送数据
            if (res.code === '200') {
              //更新数据
              this.proInfo = res.data
              this.$message.success('更新数据成功！')
              this.proInfoFormVisible = false //关闭对话框
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请完善表单相关信息！');
        }
      });
    },

    //删除/撤销认证任务——首页点击事件——弹出对话框
    delProInfo(row){
      this.productOne = JSON.parse(JSON.stringify(row)) //拿到当前行数据——然后删除
      this.deleteFormVisible = true
    },

    //删除/撤销任务——确认
    deleteConfirm(){
      //发送到后端 '/product/updateByProductInfo', {params: this.productOne}
      this.$request({
            url: '/product/delByProductInfo',
            method: 'POST',
            data: this.productOne,
          }
      ).then(res => {
        //通过
        if (res.code === '200') {
          //更新数据
          this.proInfo = res.data
          this.$message.success('撤销认证任务成功！')
          this.deleteFormVisible = false //关闭对话框
        } else {
          this.$message.error(res.msg)
        }
      })
    },


  },

  mounted() { //页面加载完成之后触发
    request.get('/product/selectAll').then(res => {
      this.proInfo = res.data
    })
  }

}
</script>

<style scoped>

/*设置表格格式*/
.table_pro th { /*表头*/
  height: 50px;
  font-weight: bold;
  background-color: #cccccc;

}

.proInfoContainer {
  display: flex;
  height: 100%; /* 确保父容器的高度是100% */
}

.leftContainer {
  width: 70%;
}

.box3 {
  height: 70%;
  background-color: #cccccc; /* 仅用于视觉效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 5px;
}

.box4 {
  padding-top: 10px;
  height: 20%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-left: 70px;
}

.box5 {
  padding-top: 20px;
  flex: 1;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.rightContainer {
  width: 30%;
  display: flex;
  flex-direction: column;
}

.progressTitle {
  height: 10.5%;
  text-align: center;
  background-color: #cccccc; /* 仅用于视觉效果 */
  border-radius: 5px;
}

.progressInfo {
  height: 89.5%;
  text-align: center;
  padding-left: 150px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊半径、扩散半径以及颜色 */;
}

</style>